<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
// 模板里的ref结合ts
const el = ref<null | HTMLInputElement>(null)
console.log(el);

onMounted(() => {
  // undefined.focun() 肯定会报错
  // undefined?.focun()  前面是undefined 后面直接不执行
  // 处理null和undefined的三种方式
  // 第一种 可选链操作符
  // console.log(el.value?.value);

  // 第二种 逻辑判断
  // if (el.value) {
  //   el.value.value = '老韩'
  // }
  // 非空断言  !
  console.log(el.value!.value);
  el.value!.value = '小韩'
})
</script>

<template>
  <div class="app-page">
    app
    <input ref="el" type="text" value="abc">
  </div>
</template>

<style lang="scss" scoped></style>
